{include file="public/head"}
<link rel="stylesheet" type="text/css" href="__STATIC__/home/laydate/theme/default/laydate.css" />
    <style>
        .laydate-time-list li:nth-of-type(3){display: none;}
        .layui-laydate-list{display: flex;}
        .laydate-time-list li{flex:1;}
        .laydate-time-list ol li{width: 100% !important;padding-left: 0 !important;text-align: center !important;}
    </style>
<body>

    <div class="appointment" style="min-height: 100vh;">
        <div class="appointment-h" style="display: block;"></div>
        <div class="com-flex">
            <div class="t">开始日期：</div>
            <div class="coach-wrap start-time">
                <div class="input-coach">
                    <div></div>
                    <img src="__STATIC__/home/img/image16.png" class="x" alt="..." />
                </div>
                <div class="coach">

                </div>
            </div>
        </div>
        <div class="com-flex s-time" style="display: none;">
            <div class="t">开始时间：</div>
            <div class="time">
                <input type="text" placeholder="请选择开始时间" id="start">
                <img src="__STATIC__/home/img/image17.png" alt="..." />
            </div>
        </div>
        <div class="com-flex end-time" style="display: none;">
            <div class="t">结束时间：</div>
            <div class="time">
                <input type="text" placeholder="请选择结束时间" id="end">
                <img src="__STATIC__/home/img/image17.png" alt="..." />
            </div>
        </div>
        <div class="com-flex jiaolan-w" style="display: none;">
            <div class="t">选择教练：</div>
            <div class="coach-wrap jiaolan">
                <div class="input-coach">
                    <div></div>
                    <img src="__STATIC__/home/img/image16.png" class="x" alt="..." />
                </div>
                <div class="coach">
                    {volist name='coach' id='v'}
                    <div class="coach-item" id="{$v.id}">{$v.name}</div>
                    {/volist}
                </div>
            </div>
        </div>
        <div class="com-flex auto long-time" style="display: none;">
            <div class="t">预约时长：</div>
            <div class="allhour"></div>
        </div>
        <div class="com-flex auto par-time" style="display: none;">
            <div class="t">预约时段：</div>
            <div class="allhour"></div>
        </div>
        {:token()}
    </div>
    <div style="height: 1.2rem;"></div>
    <div class="footer" style="display: none;">
        <div class="flex-center price"><i>￥</i>0</div>
        <div class="flex-center zaixian">
            在线预约报名
        </div>
    </div>
    <script src="__STATIC__/home/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/home/js/public.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/home/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        $(function () {
            // token令牌
            function token(cb) {
                $.ajax({
                    type: 'post',
                    url: '/index/Traincar/token',
                    success(res) {
                        if (res.code == 1) {
                            cb(res.__token__);
                        }
                    },
                    error() { alert('token令牌接口错误'); }
                })
            };
            //  		获取页面参数
            var hrefUrl = window.location.href;
            var num = hrefUrl.indexOf("jzid") + 5;
            var num2 = hrefUrl.indexOf("&kmid=");
            var num3 = hrefUrl.indexOf("&kmid=") + 6;
            var numleng = hrefUrl.length;
            var hrefId = hrefUrl.substring(num, num2);
            var hrefId2 = hrefUrl.substring(num3, numleng);
            var price = 0;
            var id = null;
            // 获取周天预约数据和时间
            $.ajax({
                type: 'get',
                url: '/index.php/index/traincar/traincarday',
                data: {
                    jzid: hrefId,
                    kmid: hrefId2
                },
                success(res) {
                    if (res.code == 1) {
                        var list = res.data || [];
                        price = res.yuyue.price;
                        id = res.yuyue.id;

                        var html = '';
                        list.forEach(function (item) {
                            html += `<div class="coach-item" id="${item.id}">${item}</div>`;
                        });
                        $('.start-time .coach').html(html);
                    } else if (res.code == 0) {
                        alert('暂无预约信息');
                    }
                },
                error() {
                    alert('获取周天预约数据和时间错误');
                }
            });

            $(document).on('click', '.jiaolan .coach-item', function (e) {
                $('.coach-item-active').removeClass('coach-item-active');
                $(this).addClass('coach-item-active');
                $('.jiaolan .input-coach').children('div').text($(this).text());
                $('.coach').slideUp(200);
                $('.footer').show();
            });
            $(document).on('click', '.jiaolan .input-coach', function (e) {
                e.stopPropagation();
                $('.jiaolan .coach').slideDown(200);
            });
            $(document).on('click', function () {
                $('.coach').slideUp(200);
            });

            // 开始时间
            $(document).on('click', '.start-time .coach-item', function (e) {
                $('.coach-item-active').removeClass('coach-item-active');
                $(this).addClass('coach-item-active');
                $('.start-time .input-coach').children('div').text($(this).text());
                $('.coach').slideUp(200);
                $('.s-time').show();
            });
            $(document).on('click', '.start-time .input-coach', function (e) {
                e.stopPropagation();
                $('.start-time .coach').slideDown(200);
            });
            var statrTime = '';
            var endTime = '';
            // 开始时间选择
            var start = laydate.render({
                elem: '#start', //指定元素
                type: 'time',
                min: '08:20:00',
                max: '17:40:00',
                btns: ['clear', 'confirm'],
                done: function (value, date, endDate) {
                    statrTime = date;
                    $('.end-time').show();
                    var end = laydate.render({
                        elem: '#end', //指定元素
                        type: 'time',
                        min: `${statrTime.hours + 1}:${statrTime.minutes}:00`,
                        max: '17:40:00',
                        btns: ['clear', 'confirm'],
                        done: function (value, date, endDate) {
                            $('.jiaolan-w').show();
                            endTime = date;
                            setTime();
                        }
                    });
                }
            });
            function setTime() {
                var hours = endTime.hours - statrTime.hours;
                var minutes = endTime.minutes - statrTime.minutes;
                // 总时间
                $('.long-time .allhour').html(`${hours}小时`);
                $('.long-time').show();
                var date = $('.start-time .input-coach div').text();
                // 时间段
                $('.par-time .allhour').html(`${date} ${statrTime.hours}:${statrTime.minutes}-${statrTime.hours + hours}:${statrTime.minutes}`);
                $('.par-time').show();
                // 价格
                var allPrice = Number(price) * hours;
                $('.footer .price').html(`<i>￥</i>${allPrice}`);
            }
            // 报名
            $(document).on('click', '.zaixian', function () {
                var token=$('input[name="__token__"]').val();
                var date = $('.start-time .input-coach div').text();
                var begin = `${date} ${statrTime.hours}:${statrTime.minutes}:00`;
                var end = `${date} ${endTime.hours}:${statrTime.minutes}:00`;
                var coachid = $('.coach-item-active').attr('id');
                // 周天确认订单
                $.ajax({
                    type: 'POST',
                    url: '/index.php/index/traincar/ordersubmit7',
                    data: {
                        id,
                        coachid,
                        begin,
                        end,
                        '__token__':token
                    },
                    success(res) {
                        if (res.code == 1) {
                            window.location.href = res.url;
                        }else if (res.code == 1000) {
                            alert('您已提交过，请刷新页面重试！');
                        } else {
                            alert(res.msg);
                        }
                    },
                    error() {
                        alert('周天确认订单接口错误');
                    }
                });
            });
        });
    </script>
</body>

</html>